<template>
    <div class="component-library" @dragover.prevent @drop="dropInLibrary">
      <div class="FeiYongZhiFu1" @dragstart="drag($event, 'FeiYongZhiFu1')" draggable="true">
        <img src="../../public/images/20241105-141818.png" alt="" style="width: 100%;max-height: 100%;">
      </div>
  
    </div>
  </template>
  
  <script setup>
  import { defineEmits } from 'vue'; // 1. 确保导入 defineEmits
  
  const emit = defineEmits(['componentDropped']); // 2. 正确设置 emit
  const drag = (event, componentType) => {
    event.dataTransfer.setData("text/plain", componentType);
    console.log("组件拖动");
  };
  
  // 处理组件拖回
  const dropInLibrary = (event) => {
    const componentType = event.dataTransfer.getData("text/plain");
    console.log(`拖回的组件: ${componentType}`); // 在这里可以添加逻辑
  
    // 发射事件到父组件
    emit('componentDropped', componentType);
  };
  
  
  </script>
  
  <style scoped>
  .component-library {
    display: flex;
    gap: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    min-height: 100px;
  }
  
  .component {
    padding: 10px;
    border: 1px solid #ccc;
    cursor: move;
    background-color: #f1f1f1;
  }
  </style>